import styles from './index.module.less';
import { IconColor } from '@codexteam/icons';
import { make } from '../../utils/dom';

class ColorTool {
    static get isInline() {
        return true;
    }

    get toolboxIcon() {
        return IconColor;
    }

    static get sanitize() {
        return {
            span: {
                class: 'cdx-color'
            }
        };
    }

    static get shortcut() {
        return 'CTRL+CL';
    }

    static get title() {
        return '文本颜色'
    }

    clear() {
        this.hideActions();
    }

    get state() {
        return this._state;
    }

    set state(state) {
        this._state = state;

        this.button.classList.toggle(this.api.styles.inlineToolButtonActive, state);
    }

    constructor({api}) {
        this.api = api;
        this.button = null;
        this._state = false;

        this.tag = 'SPAN';
        this.class = styles['cdx-color'];
    }

    render() {
        this.button = document.createElement('button');
        this.button.type = 'button';
        this.button.innerHTML = this.toolboxIcon;
        this.button.classList.add(this.api.styles.inlineToolButton);

        return this.button;
    }

    // 应用插件时执行此方法
    surround(range) {
        if (this.state) {
            // If highlights is already applied, do nothing for now
            this.unwrap(range);
            return;
        }

        this.wrap(range);
    } 

    wrap(range) {
        const selectedText = range.extractContents();
        const color = document.createElement(this.tag);
        color.classList.add(this.class);
    
        color.appendChild(selectedText);
        range.insertNode(color);
    
        this.api.selection.expandToTag(color);
    }

    unwrap(range) {
        const color = this.api.selection.findParentTag(this.tag);
        const text = range.extractContents();
    
        color.remove();
    
        range.insertNode(text);
    }

    // 选中内容时执行此方法
    checkState(selection) {
        const color = this.api.selection.findParentTag(this.tag);
        this.state = !!color;

        if (this.state) {
            this.showActions(color);
        } else {
            this.hideActions();
        }
    }

    renderActions() {
        this.colorPicker = make('input', '', {type: 'color', value: '#000', hidden: true});        
    
        return this.colorPicker;
    }

    showActions(colorBox) {
        const {color} = colorBox.style;

        this.colorPicker.value = color ? this.convertToHex(color) : '#000';

        this.colorPicker.onchange = () => {
            colorBox.style.color = this.colorPicker.value;
        };
        this.colorPicker.hidden = false;
    }

    hideActions() {
        this.colorPicker.onchange = null;
        this.colorPicker.hidden = true;
    }

    convertToHex(color) {
        const rgb = color.match(/(\d+)/g);
        
        let hexr = parseInt(rgb[0]).toString(16);
        let hexg = parseInt(rgb[1]).toString(16);
        let hexb = parseInt(rgb[2]).toString(16);
        
        hexr = hexr.length === 1 ? '0' + hexr : hexr;
        hexg = hexg.length === 1 ? '0' + hexg : hexg;
        hexb = hexb.length === 1 ? '0' + hexb : hexb;
        
        return '#' + hexr + hexg + hexb;
    }
}

export default ColorTool